import { Divider, Row, Col, Typography } from 'antd'

import PC from '@/components/reposive/pc'
import Mobile from '@/components/reposive/mobile'

import Logo from '@/components/logo/index'
import LeftLinks from '@/components/footer/footer-links'
import MiddleLinks from '@/components/footer/middle-links'
import RightLinks from '@/components/footer/right-links'

import '@/styles/app-footer.css'
import '@/styles/common.css'

const { Text } = Typography

const Footer = () => {
  const xsSize = 24
  const smSize = 24
  const mdSize = 24
  const lgSize = 6

  return (
    <>
      <Row>
        <Col xs={xsSize} sm={smSize} md={mdSize} lg={6}>
          <LeftLinks />
        </Col>
        <Col xs={xsSize} sm={smSize} md={mdSize} lg={24 - lgSize * 2}>
          <MiddleLinks />
        </Col>
        <Col xs={xsSize} sm={smSize} md={mdSize} lg={6}>
          <RightLinks />
        </Col>
      </Row>
      <Divider />
      <div className="lower-content-pc">
        <div>© 2020 Dribbble. All rights reserved.</div>
        {/* Worcester, MADenverMontreal,
              QuebecOrlando, FLRoseville, MNMinneapolis, MNLos Angeles,
              CACanadaOttawa, OntarioMontrealNorth Vancouver, BCGrass Valley,
              CaliforniaVictoria, BCAustin, TXCavite, PhilippinesOttawa,
              ONManila, PhilippinesAlamo, CAVancouver, BCMontreal,
              CanadaToronto, ONSan Diego, */}
        <div>Made with ♥ remotely from</div>
        <div>14,495,254 shots dribbbled</div>
      </div>
    </>
  )
}

export default Footer
